<template>
<div>
  <div class="searchItemDiv" v-for="(item, index) in searchList" :key="index"  @click="bindViewTap(item.productId)">
    <div class="searchItemDivImg">
      <img :src="item.imgUrl">
    </div>
    <div class="searchPositon">
      <h3 class="searchArea">{{item.productTypeName}}</h3>
      <p class="searchName">{{item.productName}}</p>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    props: {
      searchList: {
        type: Array,
      },
    },
    methods: {
      bindViewTap (id) {
        const url = '../goods-indetail/main?aid=' + id;
        wx.navigateTo({ url })
      },
    }
  }
</script>

<style scoped>
  .searchItemDiv{
    position: relative;
    height: 560rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
  }
  .searchItemDiv .searchItemDivImg{
    width: 100%;
    height: 560rpx;
  }
  .searchItemDiv .searchItemDivImg img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .searchItemDiv .searchPositon{
    padding: 0 30rpx;
    position: absolute;
    top: 0rpx;
    color: #fff;
    z-index: 2;
    height: 150rpx;
    width: 100%;
    opacity: 0.3;
    background: linear-gradient(#000,#fff); 
    background: -webkit-linear-gradient(#000,#fff);
		background: -o-linear-gradient(#000,#fff);
		background: -moz-linear-gradient(#000,#fff);
		background: -mos-linear-gradient(#000,#fff);

  }
  .searchItemDiv .searchPositon .searchArea{
    font-size: 30rpx;
    line-height: 50rpx;
  }
  .searchItemDiv .searchPositon .searchName{
    font-size: 24rpx;
    line-height: 36rpx;
  }
</style>
